{% extends "base.html" %}

{% block title %}消息中心 - 校园生活助手{% endblock %}

{% block css %}
<style>
    .messages-container {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        gap: 2rem;
    }
    .conversations-sidebar {
        flex: 1;
        min-width: 300px;
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        display: flex;
        flex-direction: column;
    }
    .sidebar-header {
        padding: 1.5rem;
        border-bottom: 1px solid #e9ecef;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .sidebar-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: #495057;
    }
    .new-message-btn {
        padding: 0.5rem 1rem;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 0.25rem;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .new-message-btn:hover {
        background-color: #0056b3;
    }
    .search-conversations {
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #e9ecef;
    }
    .search-conversations-input {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid #dee2e6;
        border-radius: 2rem;
        font-size: 1rem;
        background-color: #f8f9fa;
    }
    .search-conversations-input:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        background-color: white;
    }
    .conversations-list {
        flex: 1;
        overflow-y: auto;
    }
    .conversation-item {
        display: flex;
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid #e9ecef;
        cursor: pointer;
        transition: background-color 0.2s;
        position: relative;
    }
    .conversation-item:hover {
        background-color: #f8f9fa;
    }
    .conversation-item.active {
        background-color: #e3f2fd;
    }
    .conversation-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 1rem;
        flex-shrink: 0;
        position: relative;
    }
    .conversation-avatar.online::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 16px;
        height: 16px;
        background-color: #28a745;
        border: 2px solid white;
        border-radius: 50%;
    }
    .conversation-content {
        flex: 1;
        min-width: 0;
    }
    .conversation-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.25rem;
    }
    .conversation-name {
        font-weight: 600;
        color: #495057;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .conversation-time {
        font-size: 0.875rem;
        color: #adb5bd;
    }
    .conversation-message {
        font-size: 0.875rem;
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 0.25rem;
    }
    .conversation-unread {
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 20px;
        height: 20px;
        background-color: #dc3545;
        color: white;
        border-radius: 50%;
        font-size: 0.75rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .chat-container {
        flex: 2;
        min-width: 400px;
        display: flex;
        flex-direction: column;
    }
    .chat-header {
        background-color: white;
        border-radius: 0.5rem 0.5rem 0 0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 1.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        position: relative;
    }
    .chat-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
    }
    .chat-info {
        flex: 1;
    }
    .chat-name {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.25rem;
    }
    .chat-status {
        font-size: 0.875rem;
        color: #28a745;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
    .chat-actions {
        display: flex;
        gap: 1rem;
    }
    .chat-action-btn {
        background: none;
        border: none;
        color: #6c757d;
        font-size: 1.25rem;
        cursor: pointer;
        padding: 0.5rem;
        border-radius: 0.25rem;
        transition: background-color 0.2s, color 0.2s;
    }
    .chat-action-btn:hover {
        background-color: #f8f9fa;
        color: #495057;
    }
    .chat-messages {
        flex: 1;
        background-color: white;
        padding: 2rem;
        overflow-y: auto;
        position: relative;
    }
    .chat-messages::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url('https://via.placeholder.com/1500x1000?text=Chat+Background');
        background-size: cover;
        background-position: center;
        opacity: 0.05;
        z-index: 0;
    }
    .message-wrapper {
        position: relative;
        z-index: 1;
    }
    .message-group {
        margin-bottom: 1.5rem;
    }
    .message-group-header {
        text-align: center;
        margin-bottom: 1rem;
    }
    .message-date {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        background-color: #e9ecef;
        color: #6c757d;
        border-radius: 1rem;
        font-size: 0.875rem;
    }
    .message-item {
        display: flex;
        margin-bottom: 1rem;
        gap: 0.75rem;
    }
    .message-item.sent {
        flex-direction: row-reverse;
    }
    .message-item.received {
        flex-direction: row;
    }
    .message-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }
    .message-content {
        max-width: 70%;
    }
    .message-bubble {
        padding: 0.75rem 1rem;
        border-radius: 1rem;
        margin-bottom: 0.25rem;
        word-wrap: break-word;
        position: relative;
    }
    .message-item.sent .message-bubble {
        background-color: #007bff;
        color: white;
        border-bottom-right-radius: 0.25rem;
    }
    .message-item.received .message-bubble {
        background-color: #f8f9fa;
        color: #495057;
        border-bottom-left-radius: 0.25rem;
    }
    .message-time {
        font-size: 0.75rem;
        color: #adb5bd;
        text-align: right;
        margin-right: 0.5rem;
    }
    .message-item.received .message-time {
        text-align: left;
        margin-right: 0;
        margin-left: 0.5rem;
    }
    .message-status {
        font-size: 0.75rem;
        color: #007bff;
        margin-right: 0.5rem;
    }
    .message-file {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        border-radius: 0.5rem;
        background-color: rgba(255, 255, 255, 0.9);
        border: 1px solid #e9ecef;
        margin-bottom: 0.25rem;
    }
    .message-item.sent .message-file {
        background-color: rgba(0, 123, 255, 0.1);
    }
    .file-icon {
        font-size: 1.5rem;
        color: #6c757d;
    }
    .file-info {
        flex: 1;
    }
    .file-name {
        font-weight: 500;
        color: #495057;
        margin-bottom: 0.25rem;
        word-wrap: break-word;
    }
    .file-size {
        font-size: 0.75rem;
        color: #6c757d;
    }
    .file-download-btn {
        padding: 0.5rem;
        background-color: #f8f9fa;
        color: #007bff;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
        cursor: pointer;
        transition: background-color 0.2s;
    }
    .file-download-btn:hover {
        background-color: #e9ecef;
    }
    .message-image {
        max-width: 200px;
        border-radius: 0.5rem;
        margin-bottom: 0.25rem;
        cursor: pointer;
        transition: transform 0.2s;
    }
    .message-image:hover {
        transform: scale(1.02);
    }
    .chat-input-area {
        background-color: white;
        border-radius: 0 0 0.5rem 0.5rem;
        box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
        padding: 1.5rem;
    }
    .chat-input-toolbar {
        display: flex;
        gap: 1rem;
        margin-bottom: 1rem;
        color: #6c757d;
    }
    .chat-tool-btn {
        background: none;
        border: none;
        color: inherit;
        font-size: 1.25rem;
        cursor: pointer;
        padding: 0.5rem;
        border-radius: 0.25rem;
        transition: background-color 0.2s, color 0.2s;
    }
    .chat-tool-btn:hover {
        background-color: #f8f9fa;
        color: #495057;
    }
    .chat-input-container {
        display: flex;
        gap: 1rem;
        align-items: flex-end;
    }
    .chat-input {
        flex: 1;
        min-height: 40px;
        max-height: 150px;
        padding: 0.75rem 1rem;
        border: 1px solid #dee2e6;
        border-radius: 2rem;
        font-size: 1rem;
        resize: none;
        outline: none;
    }
    .chat-input:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    .send-message-btn {
        padding: 0.75rem 1.5rem;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 2rem;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .send-message-btn:hover {
        background-color: #0056b3;
    }
    .send-message-btn:disabled {
        background-color: #6c757d;
        cursor: not-allowed;
    }
    .empty-chat {
        flex: 1;
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 4rem 2rem;
        text-align: center;
    }
    .empty-chat-icon {
        font-size: 4rem;
        color: #adb5bd;
        margin-bottom: 1rem;
    }
    .empty-chat-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.5rem;
    }
    .empty-chat-description {
        color: #6c757d;
        margin-bottom: 1.5rem;
        max-width: 300px;
    }
    .empty-chat-btn {
        padding: 0.75rem 1.5rem;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 0.25rem;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s;
    }
    .empty-chat-btn:hover {
        background-color: #0056b3;
    }
    .alert {
        padding: 1rem;
        border-radius: 0.25rem;
        margin-bottom: 1.5rem;
    }
    .alert-success {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }
    .alert-danger {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
    .alert-warning {
        background-color: #fff3cd;
        color: #856404;
        border: 1px solid #ffeaa7;
    }
    .alert-info {
        background-color: #d1ecf1;
        color: #0c5460;
        border: 1px solid #bee5eb;
    }
    /* 响应式设计 */
    @media (max-width: 992px) {
        .messages-container {
            flex-direction: column;
        }
        .conversations-sidebar {
            min-width: auto;
            max-height: 300px;
        }
        .chat-container {
            min-width: auto;
        }
        .message-content {
            max-width: 80%;
        }
    }
    @media (max-width: 768px) {
        .messages-container {
            gap: 1rem;
        }
        .sidebar-header {
            padding: 1rem;
            flex-direction: column;
            gap: 1rem;
            align-items: stretch;
        }
        .new-message-btn {
            justify-content: center;
        }
        .search-conversations {
            padding: 0.75rem 1rem;
        }
        .conversation-item {
            padding: 1rem;
        }
        .chat-header {
            padding: 1rem;
        }
        .chat-actions {
            gap: 0.5rem;
        }
        .chat-messages {
            padding: 1rem;
        }
        .chat-input-area {
            padding: 1rem;
        }
        .chat-input-toolbar {
            gap: 0.5rem;
        }
        .message-content {
            max-width: 85%;
        }
        .message-image {
            max-width: 150px;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-800">
        <i class="fa fa-comments mr-2 text-primary"></i>消息中心
    </h1>
    <p class="text-gray-600">与同学和老师进行私信交流</p>
</div>

<!-- 消息提示区域 -->
{% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        {% for category, message in messages %}
            <div class="alert alert-{{ category }} fade-in mb-4" role="alert">
                <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}
{% endwith %}

<div class="messages-container">
    <!-- 会话侧边栏 -->
    <div class="conversations-sidebar">
        <div class="sidebar-header">
            <h2 class="sidebar-title">消息</h2>
            <button id="new-message-btn" class="new-message-btn">
                <i class="fa fa-pencil"></i>
                新建消息
            </button>
        </div>
        
        <div class="search-conversations">
            <input type="text" id="search-conversations-input" class="search-conversations-input" placeholder="搜索对话...">
        </div>
        
        <div class="conversations-list" id="conversations-list">
            <!-- 会话项示例 - 活跃会话 -->
            <div class="conversation-item active" data-conversation-id="1">
                <img src="https://via.placeholder.com/50?text=张" alt="用户头像" class="conversation-avatar online">
                <div class="conversation-content">
                    <div class="conversation-header">
                        <div class="conversation-name">张同学</div>
                        <div class="conversation-time">10:25</div>
                    </div>
                    <div class="conversation-message">明天的计算机网络作业你做完了吗？</div>
                </div>
                <div class="conversation-unread">2</div>
            </div>
            
            <!-- 会话项示例 - 未读消息 -->
            <div class="conversation-item" data-conversation-id="2">
                <img src="https://via.placeholder.com/50?text=李" alt="用户头像" class="conversation-avatar">
                <div class="conversation-content">
                    <div class="conversation-header">
                        <div class="conversation-name">李教授</div>
                        <div class="conversation-time">昨天</div>
                    </div>
                    <div class="conversation-message">关于你的项目，我们需要安排一次讨论。</div>
                </div>
                <div class="conversation-unread">1</div>
            </div>
            
            <!-- 会话项示例 - 已读消息 -->
            <div class="conversation-item" data-conversation-id="3">
                <img src="https://via.placeholder.com/50?text=王" alt="用户头像" class="conversation-avatar online">
                <div class="conversation-content">
                    <div class="conversation-header">
                        <div class="conversation-name">王同学</div>
                        <div class="conversation-time">前天</div>
                    </div>
                    <div class="conversation-message">谢谢你分享的学习资料，非常有用！</div>
                </div>
            </div>
            
            <div class="conversation-item" data-conversation-id="4">
                <img src="https://via.placeholder.com/50?text=刘" alt="用户头像" class="conversation-avatar">
                <div class="conversation-content">
                    <div class="conversation-header">
                        <div class="conversation-name">刘同学</div>
                        <div class="conversation-time">上周</div>
                    </div>
                    <div class="conversation-message">周末的校园招聘会你去吗？</div>
                </div>
            </div>
            
            <div class="conversation-item" data-conversation-id="5">
                <img src="https://via.placeholder.com/50?text=赵" alt="用户头像" class="conversation-avatar">
                <div class="conversation-content">
                    <div class="conversation-header">
                        <div class="conversation-name">赵助教</div>
                        <div class="conversation-time">10/15</div>
                    </div>
                    <div class="conversation-message">操作系统实验的截止日期延长到下周五了。</div>
                </div>
            </div>
            
            <div class="conversation-item" data-conversation-id="6">
                <img src="https://via.placeholder.com/50?text=陈" alt="用户头像" class="conversation-avatar online">
                <div class="conversation-content">
                    <div class="conversation-header">
                        <div class="conversation-name">陈同学</div>
                        <div class="conversation-time">10/10</div>
                    </div>
                    <div class="conversation-message">我们组队参加科技创新大赛吧！</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 聊天区域 -->
    <div class="chat-container">
        <!-- 聊天头部 -->
        <div class="chat-header">
            <img src="https://via.placeholder.com/50?text=张" alt="用户头像" class="chat-avatar">
            <div class="chat-info">
                <div class="chat-name">张同学</div>
                <div class="chat-status">
                    <span style="display: inline-block; width: 8px; height: 8px; background-color: #28a745; border-radius: 50%; margin-right: 4px;"></span>
                    在线
                </div>
            </div>
            <div class="chat-actions">
                <button class="chat-action-btn" title="查看个人资料">
                    <i class="fa fa-user-circle"></i>
                </button>
                <button class="chat-action-btn" title="更多选项">
                    <i class="fa fa-ellipsis-v"></i>
                </button>
            </div>
        </div>
        
        <!-- 聊天消息区域 -->
        <div class="chat-messages" id="chat-messages">
            <div class="message-wrapper">
                <!-- 日期分隔 -->
                <div class="message-group-header">
                    <div class="message-date">今天</div>
                </div>
                
                <!-- 收到的消息 -->
                <div class="message-item received">
                    <img src="https://via.placeholder.com/36?text=张" alt="用户头像" class="message-avatar">
                    <div class="message-content">
                        <div class="message-bubble">嘿，你好！</div>
                        <div class="message-time">09:45</div>
                    </div>
                </div>
                
                <!-- 发送的消息 -->
                <div class="message-item sent">
                    <img src="https://via.placeholder.com/36?text=我" alt="我的头像" class="message-avatar">
                    <div class="message-content">
                        <div class="message-bubble">你好，张同学！</div>
                        <div class="message-time">09:47</div>
                        <div class="message-status">已读</div>
                    </div>
                </div>
                
                <!-- 收到的消息 -->
                <div class="message-item received">
                    <img src="https://via.placeholder.com/36?text=张" alt="用户头像" class="message-avatar">
                    <div class="message-content">
                        <div class="message-bubble">明天的计算机网络作业你做完了吗？我有些问题想请教你。</div>
                        <div class="message-time">10:20</div>
                    </div>
                </div>
                
                <!-- 收到的消息 - 文件 -->
                <div class="message-item received">
                    <img src="https://via.placeholder.com/36?text=张" alt="用户头像" class="message-avatar">
                    <div class="message-content">
                        <div class="message-file">
                            <div class="file-icon">
                                <i class="fa fa-file-pdf-o"></i>
                            </div>
                            <div class="file-info">
                                <div class="file-name">计算机网络作业参考资料.pdf</div>
                                <div class="file-size">2.5 MB</div>
                            </div>
                            <button class="file-download-btn">
                                <i class="fa fa-download"></i>
                            </button>
                        </div>
                        <div class="message-time">10:22</div>
                    </div>
                </div>
                
                <!-- 发送的消息 -->
                <div class="message-item sent">
                    <img src="https://via.placeholder.com/36?text=我" alt="我的头像" class="message-avatar">
                    <div class="message-content">
                        <div class="message-bubble">我刚做完，正在整理。我可以把我的思路分享给你。</div>
                        <div class="message-time">10:25</div>
                        <div class="message-status">已读</div>
                    </div>
                </div>
                
                <!-- 发送的消息 - 图片 -->
                <div class="message-item sent">
                    <img src="https://via.placeholder.com/36?text=我" alt="我的头像" class="message-avatar">
                    <div class="message-content">
                        <img src="https://via.placeholder.com/300x200?text=网络拓扑图" alt="网络拓扑图" class="message-image">
                        <div class="message-time">10:26</div>
                        <div class="message-status">已读</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 聊天输入区域 -->
        <div class="chat-input-area">
            <div class="chat-input-toolbar">
                <button class="chat-tool-btn" title="发送图片">
                    <i class="fa fa-image"></i>
                </button>
                <button class="chat-tool-btn" title="发送文件">
                    <i class="fa fa-paperclip"></i>
                </button>
                <button class="chat-tool-btn" title="表情">
                    <i class="fa fa-smile-o"></i>
                </button>
                <button class="chat-tool-btn" title="语音消息">
                    <i class="fa fa-microphone"></i>
                </button>
            </div>
            
            <div class="chat-input-container">
                <textarea id="chat-input" class="chat-input" placeholder="输入消息..." rows="1"></textarea>
                <button id="send-message-btn" class="send-message-btn" disabled>
                    <i class="fa fa-paper-plane"></i>
                    发送
                </button>
            </div>
        </div>
    </div>
    
    <!-- 空聊天状态（当没有选择会话时显示） -->
    <!-- 
    <div class="empty-chat">
        <div class="empty-chat-icon">
            <i class="fa fa-comments-o"></i>
        </div>
        <div class="empty-chat-title">选择一个对话开始聊天</div>
        <div class="empty-chat-description">
            从左侧列表中选择一个联系人开始对话，或者创建一个新的消息。
        </div>
        <button class="empty-chat-btn">
            <i class="fa fa-pencil mr-1"></i>
            新建消息
        </button>
    </div>
    -->
</div>
{% endblock %}

{% block js %}
<script>
    // 获取DOM元素
    const conversationItems = document.querySelectorAll('.conversation-item');
    const chatContainer = document.querySelector('.chat-container');
    const emptyChat = document.querySelector('.empty-chat');
    const chatMessages = document.getElementById('chat-messages');
    const chatInput = document.getElementById('chat-input');
    const sendMessageBtn = document.getElementById('send-message-btn');
    const newMessageBtn = document.getElementById('new-message-btn');
    const searchConversationsInput = document.getElementById('search-conversations-input');
    
    // 选择会话
    conversationItems.forEach(item => {
        item.addEventListener('click', function() {
            // 移除所有会话的active类
            conversationItems.forEach(conversation => conversation.classList.remove('active'));
            // 添加当前会话的active类
            this.classList.add('active');
            
            // 显示聊天区域，隐藏空聊天状态
            chatContainer.style.display = 'flex';
            if (emptyChat) {
                emptyChat.style.display = 'none';
            }
            
            // 获取会话ID和用户信息
            const conversationId = this.getAttribute('data-conversation-id');
            const userName = this.querySelector('.conversation-name').textContent;
            const userAvatar = this.querySelector('.conversation-avatar').src;
            
            // 更新聊天头部信息
            updateChatHeader(userName, userAvatar);
            
            // 加载对话历史
            loadConversationHistory(conversationId);
        });
    });
    
    // 输入框内容变化时启用/禁用发送按钮
    chatInput.addEventListener('input', function() {
        if (this.value.trim()) {
            sendMessageBtn.disabled = false;
        } else {
            sendMessageBtn.disabled = true;
        }
        
        // 自动调整输入框高度
        this.style.height = 'auto';
        this.style.height = Math.min(this.scrollHeight, 150) + 'px';
    });
    
    // 发送消息
    sendMessageBtn.addEventListener('click', function() {
        sendMessage();
    });
    
    // 回车键发送消息（Shift+Enter换行）
    chatInput.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendMessage();
        }
    });
    
    // 新建消息按钮点击事件
    newMessageBtn.addEventListener('click', function() {
        // 在实际应用中，这里应该打开一个新建消息的模态框
        alert('新建消息功能将在后续版本中实现');
    });
    
    // 搜索会话
    searchConversationsInput.addEventListener('input', function() {
        const searchTerm = this.value.toLowerCase().trim();
        
        conversationItems.forEach(item => {
            const userName = item.querySelector('.conversation-name').textContent.toLowerCase();
            const messageText = item.querySelector('.conversation-message').textContent.toLowerCase();
            
            if (userName.includes(searchTerm) || messageText.includes(searchTerm)) {
                item.style.display = 'flex';
            } else {
                item.style.display = 'none';
            }
        });
    });
    
    // 更新聊天头部信息
    function updateChatHeader(userName, userAvatar) {
        const chatName = document.querySelector('.chat-name');
        const chatAvatar = document.querySelector('.chat-avatar');
        
        if (chatName && chatAvatar) {
            chatName.textContent = userName;
            chatAvatar.src = userAvatar;
        }
    }
    
    // 加载对话历史
    function loadConversationHistory(conversationId) {
        // 显示加载状态
        chatMessages.innerHTML = `
            <div style="display: flex; align-items: center; justify-content: center; height: 200px; color: #6c757d;">
                <div class="spinner-border" role="status">
                    <span class="sr-only">加载中...</span>
                </div>
                <span style="margin-left: 1rem;">加载对话历史...</span>
            </div>
        `;
        
        // 模拟加载延迟
        setTimeout(() => {
            // 在实际应用中，这里应该通过AJAX请求获取对话历史
            // 这里只是为了演示，我们使用模拟数据
            
            // 恢复聊天消息
            chatMessages.innerHTML = `
                <div class="message-wrapper">
                    <!-- 日期分隔 -->
                    <div class="message-group-header">
                        <div class="message-date">今天</div>
                    </div>
                    
                    <!-- 收到的消息 -->
                    <div class="message-item received">
                        <img src="https://via.placeholder.com/36?text=张" alt="用户头像" class="message-avatar">
                        <div class="message-content">
                            <div class="message-bubble">嘿，你好！</div>
                            <div class="message-time">09:45</div>
                        </div>
                    </div>
                    
                    <!-- 发送的消息 -->
                    <div class="message-item sent">
                        <img src="https://via.placeholder.com/36?text=我" alt="我的头像" class="message-avatar">
                        <div class="message-content">
                            <div class="message-bubble">你好，张同学！</div>
                            <div class="message-time">09:47</div>
                            <div class="message-status">已读</div>
                        </div>
                    </div>
                    
                    <!-- 收到的消息 -->
                    <div class="message-item received">
                        <img src="https://via.placeholder.com/36?text=张" alt="用户头像" class="message-avatar">
                        <div class="message-content">
                            <div class="message-bubble">明天的计算机网络作业你做完了吗？我有些问题想请教你。</div>
                            <div class="message-time">10:20</div>
                        </div>
                    </div>
                    
                    <!-- 收到的消息 - 文件 -->
                    <div class="message-item received">
                        <img src="https://via.placeholder.com/36?text=张" alt="用户头像" class="message-avatar">
                        <div class="message-content">
                            <div class="message-file">
                                <div class="file-icon">
                                    <i class="fa fa-file-pdf-o"></i>
                                </div>
                                <div class="file-info">
                                    <div class="file-name">计算机网络作业参考资料.pdf</div>
                                    <div class="file-size">2.5 MB</div>
                                </div>
                                <button class="file-download-btn">
                                    <i class="fa fa-download"></i>
                                </button>
                            </div>
                            <div class="message-time">10:22</div>
                        </div>
                    </div>
                    
                    <!-- 发送的消息 -->
                    <div class="message-item sent">
                        <img src="https://via.placeholder.com/36?text=我" alt="我的头像" class="message-avatar">
                        <div class="message-content">
                            <div class="message-bubble">我刚做完，正在整理。我可以把我的思路分享给你。</div>
                            <div class="message-time">10:25</div>
                            <div class="message-status">已读</div>
                        </div>
                    </div>
                    
                    <!-- 发送的消息 - 图片 -->
                    <div class="message-item sent">
                        <img src="https://via.placeholder.com/36?text=我" alt="我的头像" class="message-avatar">
                        <div class="message-content">
                            <img src="https://via.placeholder.com/300x200?text=网络拓扑图" alt="网络拓扑图" class="message-image">
                            <div class="message-time">10:26</div>
                            <div class="message-status">已读</div>
                        </div>
                    </div>
                </div>
            `;
            
            // 滚动到底部
            scrollToBottom();
            
            // 为新添加的文件下载按钮添加事件
            addFileDownloadEvents();
            
            // 为新添加的图片添加点击事件
            addImageClickEvents();
        }, 800);
    }
    
    // 发送消息函数
    function sendMessage() {
        const messageText = chatInput.value.trim();
        
        if (messageText) {
            // 显示发送中状态
            sendMessageBtn.disabled = true;
            sendMessageBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 发送中...';
            
            // 模拟发送延迟
            setTimeout(() => {
                // 创建新消息元素
                const now = new Date();
                const timeString = now.getHours() + ':' + (now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes());
                
                const newMessage = document.createElement('div');
                newMessage.className = 'message-item sent';
                newMessage.innerHTML = `
                    <img src="https://via.placeholder.com/36?text=我" alt="我的头像" class="message-avatar">
                    <div class="message-content">
                        <div class="message-bubble">${escapeHtml(messageText)}</div>
                        <div class="message-time">${timeString}</div>
                        <div class="message-status">发送中</div>
                    </div>
                `;
                
                // 添加到消息列表
                const messageWrapper = chatMessages.querySelector('.message-wrapper');
                messageWrapper.appendChild(newMessage);
                
                // 清空输入框
                chatInput.value = '';
                chatInput.style.height = 'auto';
                
                // 滚动到底部
                scrollToBottom();
                
                // 模拟消息发送成功
                setTimeout(() => {
                    const messageStatus = newMessage.querySelector('.message-status');
                    messageStatus.textContent = '已读';
                    sendMessageBtn.disabled = false;
                    sendMessageBtn.innerHTML = '<i class="fa fa-paper-plane"></i> 发送';
                }, 500);
                
                // 模拟回复消息
                setTimeout(() => {
                    const replyMessage = document.createElement('div');
                    replyMessage.className = 'message-item received';
                    replyMessage.innerHTML = `
                        <img src="https://via.placeholder.com/36?text=张" alt="用户头像" class="message-avatar">
                        <div class="message-content">
                            <div class="message-bubble">谢谢你的分享，我明白了！</div>
                            <div class="message-time">${timeString}</div>
                        </div>
                    `;
                    
                    messageWrapper.appendChild(replyMessage);
                    scrollToBottom();
                }, 2000);
            }, 500);
        }
    }
    
    // 滚动到底部
    function scrollToBottom() {
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }
    
    // 为文件下载按钮添加事件
    function addFileDownloadEvents() {
        const fileDownloadBtns = document.querySelectorAll('.file-download-btn');
        fileDownloadBtns.forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation(); // 阻止事件冒泡
                // 在实际应用中，这里应该触发文件下载
                alert('文件下载功能将在后续版本中实现');
            });
        });
    }
    
    // 为图片添加点击事件
    function addImageClickEvents() {
        const messageImages = document.querySelectorAll('.message-image');
        messageImages.forEach(img => {
            img.addEventListener('click', function() {
                // 在实际应用中，这里应该打开图片预览模态框
                alert('图片预览功能将在后续版本中实现');
            });
        });
    }
    
    // HTML转义函数
    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
    
    // 页面载入动画
    document.addEventListener('DOMContentLoaded', function() {
        const messagesContainer = document.querySelector('.messages-container');
        
        messagesContainer.style.opacity = '0';
        messagesContainer.style.transform = 'translateY(20px)';
        messagesContainer.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        
        setTimeout(() => {
            messagesContainer.style.opacity = '1';
            messagesContainer.style.transform = 'translateY(0)';
        }, 100);
        
        // 为会话项添加渐进式动画
        conversationItems.forEach((item, index) => {
            item.style.opacity = '0';
            item.style.transform = 'translateY(10px)';
            item.style.transition = `opacity 0.3s ease ${index * 0.05}s, transform 0.3s ease ${index * 0.05}s`;
            
            setTimeout(() => {
                item.style.opacity = '1';
                item.style.transform = 'translateY(0)';
            }, 200 + index * 50);
        });
        
        // 滚动到底部
        setTimeout(() => {
            scrollToBottom();
        }, 500);
    });
</script>
{% endblock %}